<template>
  <div>
    <div class="base-container">
      <p class="title">盘点信息</p>
      <el-descriptions class="descriptions">
        <el-descriptions-item label="任务名称：">{{ info.name }}</el-descriptions-item>
        <el-descriptions-item label="盘点公司：">{{ info.companyName }}</el-descriptions-item>
        <el-descriptions-item label="盘点部门：">{{ info.departName }}</el-descriptions-item>
        <el-descriptions-item label="盘点人员：">{{ info.userName }}</el-descriptions-item>
        <el-descriptions-item label="盘点日期：">{{ info.startDate + ' - ' + info.endDate }}</el-descriptions-item>
        <el-descriptions-item label="资产类型：">
          <div style="display: inline-block">
            <dict-tag :options="fixed_assets_type" :value="info.assetType"/>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="任务状态：">
          <div style="display: inline-block">
            <dict-tag :options="asset_task_status" :value="info.status"/>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="盘点开始时间：">{{ info.startTime }}</el-descriptions-item>
        <el-descriptions-item label="盘点结束时间：">{{ info.completedTime }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="base-container mt-10px mb-50px">
      <el-tabs v-model="activeTab" @tab-change="tabChange">
        <el-tab-pane :label="`全部(${sum.all || 0})`" :name="0"></el-tab-pane>
        <el-tab-pane :label="`已盘(${sum.inventoried || 0})`" :name="1"></el-tab-pane>
        <el-tab-pane v-if="info.status != 2" :label="`未盘(${sum.notInventoried || 0})`" :name="2"></el-tab-pane>
        <el-tab-pane v-if="info.status == 2" :label="`盘盈(${sum.inventoryProfit || 0})`" :name="3"></el-tab-pane>
        <el-tab-pane v-if="info.status == 2" :label="`盘亏(${sum.notInventoried || 0})`" :name="2"></el-tab-pane>
      </el-tabs>
      <el-table class="mt-10px" border v-loading="loading" :data="list">
        <el-table-column label="资产名称" align="center" prop="assetName" min-width="120" show-overflow-tooltip />
        <el-table-column label="资产编码" align="center" prop="assetNumber" min-width="120" show-overflow-tooltip />
        <el-table-column label="规格型号" align="center" prop="assetModel" min-width="100" />
        <el-table-column label="资产类型" align="center" prop="assetType" width="120">
          <template #default="scope">
            <dict-tag :options="fixed_assets_type" :value="scope.row.assetType"/>
          </template>
        </el-table-column>
        <el-table-column label="所属公司" align="center" prop="companyName" min-width="120" show-overflow-tooltip />
        <!-- <el-table-column label="所属分公司" align="center" prop="name" min-width="120" show-overflow-tooltip /> -->
        <el-table-column label="所属部门" align="center" prop="departName" min-width="120" show-overflow-tooltip />
        <el-table-column label="负责人" align="center" prop="personLiable" min-width="120" show-overflow-tooltip />
        <el-table-column label="资产状态" align="center" prop="assetStatus" width="120">
          <template #default="scope">
            <dict-tag :options="fixed_assets_status" :value="scope.row.assetStatus"/>
          </template>
        </el-table-column>
        <el-table-column label="盘点状态" align="center" prop="status" width="120">
          <template #default="scope">
            <dict-tag :options="asset_inventory_status" :value="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" min-width="150" show-overflow-tooltip />
      </el-table>
    </div>
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="page"
      v-model:limit="pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
import { getAssetsInventory, getAssetsInventoryDetail } from "@/api/asset/task"

const route = useRoute()
const { proxy } = getCurrentInstance()
const { fixed_assets_type, asset_inventory_status, fixed_assets_status, asset_task_status } = proxy.useDict('fixed_assets_type', 'asset_inventory_status', 'fixed_assets_status', 'asset_task_status')

const info = ref({})
const activeTab = ref(0)
const loading = ref(false)
const list = ref([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(10)
const sum = ref({})

const getDetail = () => {
  getAssetsInventory(route.params.id).then(res => {
    info.value = res.data
  })
}

const tabChange = (val) => {
  page.value = 1
  getList()
}

const getList = () => {
  const params = {
    inventoryId: route.params.id,
    page: page.value,
    pageSize: pageSize.value,
    status: activeTab.value
  }
  getAssetsInventoryDetail(params).then(res => {
    sum.value = res.data.num
    list.value = res.data.list
    if (activeTab.value == 0) {
      total.value = Number(sum.value.all)
    } else if (activeTab.value == 1) {
      total.value = Number(sum.value.inventoried)
    } else if (activeTab.value == 2) {
      total.value = Number(sum.value.notInventoried)
    } else if (activeTab.value == 3) {
      total.value = Number(sum.value.inventoryProfit)
    }
  })
}

getList()
getDetail()
</script>

<style lang="scss" scoped>
.title {
  color: rgb(31, 31, 31);
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed rgb(225, 225, 225);
}

.descriptions {
  :deep(.el-descriptions__cell) {
    width: 33.33%
  }

  :deep(.el-descriptions__content) {
    word-break: break-all;
  }
}

:deep(.unpay) {
  color: #F64C4C !important;
}
</style>